<template>
	<div>
        <img class="small-img" :src="src" @click="activeImg = src">
        <transition name="fade">
			<div class="img-pop-bg" v-if="activeImg"
			@click="activeImg = ''">
				<img @click.stop :src="activeImg">
			</div>
		</transition>
    </div>
</template>
<script>
export default{
	name:'ImgHolder',
    data(){
        return{
            activeImg: '',
        }
    },
    props: ['src']
}
</script>
<style lang='less' scoped>
.small-img{
    width:2.13rem;
    height: 2.13rem;
}
.img-pop-bg{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    img{
        margin: auto;
        max-width: 100%;
        max-height: 80%;
    }
}
</style>